<template>
  <div class="maintainContainer" style="display: flex ">
    <div class="main_from" style="width: 80%">
      <div class="env_content" style="width:100%;height:5%;border-bottom-style:solid;border-color:rgb(9,90,134);display: flex;flex-direction: row;justify-content: space-between;">
        <div style="width:50%;height:100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-end;">
          <div style="width:10%;height:100%;border-bottom-style:solid;border-color:rgb(6,203,255);margin-right: 2%;" />
          <el-radio-group v-model="activeMainName" class="maintain_tab1" @change="radioChange">
            <el-radio-button label="1" class="second_button"><span style="margin-left: 8px">电阻</span></el-radio-button>
            <el-radio-button label="2" style="margin-left: 5px" class="second_button"><span style="margin-left: 8px">电容</span></el-radio-button>
            <el-radio-button label="3" style="margin-left: 5px" class="second_button"><span style="margin-left: 8px">TCE</span></el-radio-button>
            <el-radio-button label="4" style="margin-left: 5px" class="second_button"><span>主通流回路</span></el-radio-button>
            <el-radio-button label="5" style="margin-left: 5px" class="second_button"><span style="margin-left: 6px">铂电极</span></el-radio-button>
            <el-radio-button label="6" style="margin-left: 5px" class="second_button"><span style="margin-left: 4px"> 备品备件</span></el-radio-button>
            <el-radio-button label="7" style="margin-left: 5px" class="second_button"><span style="margin-left: 4px"> 培训视频</span></el-radio-button>
          </el-radio-group>
        </div>

        <div style="width:5%;height:100%;border-bottom-style:solid;border-color:rgb(6,203,255);" />

      </div>
      <!--      <div style="width:100%;height:5%;border-bottom-style:solid;border-color:rgb(9,90,134);display: flex;flex-direction: row-reverse;justify-content: space-between;">-->
      <template v-if="activeMainName=='6'">
        <Myspareparts :sample-array="spareArray" />
      </template>
      <template v-else-if="activeMainName=='7'">
        <el-col :span="4">
          <el-card style="width: 98%;height:840px;background-color: #061F33;margin: 2% 2% 2% 2%">
            <el-tree
              :data="videodata"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick"
            />
          </el-card>
        </el-col>
        <el-col :span="20">
          <video-player
            ref="videoPlayer"
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="playerOptions"
          />
        </el-col></template>
      <template v-else>
        <el-tabs v-model="activeSubName" type="card" class="maintain_tab2" style="width: 100%;margin-top: 1%" @tab-click="tabChange">
          <el-tab-pane v-for="(item, index) in subNameArray" :key="index" :label="item+'阀塔'" :name="item">
            <p style="position: absolute;bottom: 0px;margin:0px;text-align: center;width: 100%">{{ item }}+阀塔</p>
            <div style="width: 100%;height:800px;background-color: transparent;display: flex;flex-direction: column;flex-wrap: wrap; justify-content: space-between;align-items: center;margin-left: 1%;margin-top: 1%">
              <template v-if="activeMainName=='1'||activeMainName=='2'||activeMainName=='3'">
                <div v-for="(numitem, numindex) in resistArray" :key="numindex" style="width: 48%;height:24%; background-color: #061F33;text-align: left;align-items: center;">
                  <Myresistance :sample-array="numitem" :titlename="numindex" />
                </div>
              </template>
              <template v-else-if="activeMainName=='4'">
                <div v-for="(numitem, numindex) in circuitArray" :key="numindex" style="width: 48%;height:24%; background-color: #061F33;text-align: left;align-items: center;">
                  <Mycircuit :sample-array="numitem" :titlename="numindex" />
                </div>

              </template>
              <template v-else-if="activeMainName=='5'">
                <div v-for="(numitem, numindex) in plelectrodeArray" :key="numindex" style="width: 48%;height:18%; background-color: #061F33;text-align: left;align-items: center;">
                  <Myplelectrode :sample-array="numitem" :titlename="numindex" />
                </div>
              </template>

            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
      <!--      </div>-->
    </div>
    <div style="width: 18%;height:100%;background-color: #061F33;display: flex;flex-direction: column;padding: 1.5% 1% 1% 1%;margin:1% 1% 1% 1%">
      <el-table
        :data="devStatusData"
        :header-cell-style="{'text-align':'center','background-color':'rgb(7,40,65)','border':'1px solid #104662'}"
        :cell-style="{'text-align':'center','background-color': 'rgb(5,33,56)','border':'1px solid #104662'}"
        style="width: 95%; height:100%;margin-left: 2%"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="60px"
          show-overflow-tooltip
        />

        <el-table-column
          prop="name"
          label="内容"
          min-width="80%"
          show-overflow-tooltip
        />

      </el-table>
      <el-pagination
        background
        :current-page="page.currentPage"
        :page-size="25"
        layout="total,prev, pager, next"
        :total="page.totalCount"
        size="small"
        @current-change="handleCurrentChange"
      />
      <input v-show="false" ref="fileRef" type="file" @change="uploadFileWithClear($event)">
      <el-button @click="submitFile">上传</el-button>
    </div>
  </div>
</template>

<script>
import Myresistance from '../../components/DataMaintain/Myresistance'
import Mycircuit from '../../components/DataMaintain/Mycircuit'
import Myplelectrode from '../../components/DataMaintain/Myplelectrode'
import Myspareparts from '../../components/DataMaintain/Myspareparts'
import TreeMenu from '../../components/MyBar/TreeMenu'
// import { videoPlayer } from 'vue-video-player'
//
// import 'video.js/dist/video-js.css'
import { ppreadData, getfileList } from '../../api/datamaintain'
import axios from 'axios'
export default {
  name: 'Datamaintain',
  // eslint-disable-next-line vue/no-unused-components
  components: { Myplelectrode, Mycircuit, Myresistance, Myspareparts, TreeMenu },
  data() {
    return {
      arr: [],
      resistArray: [],
      spareArray: [],
      plelectrodeArray: [],
      circuitArray: [],
      activeMainName: '1',
      activeSubName: 'VAY',
      subNameArray: ['VAY', 'VBY', 'VCY', 'VAD', 'VBD', 'VCD'],
      page: {
        currentPage: 1,
        pageSize: 25,
        totalCount: 1
      },

      devStatusData: [
      ],
      videodata: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1'

        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1'

        }, {
          label: '二级 2-2'

        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1'

        }, {
          label: '二级 3-2'

        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          // src: 'http://vjs.zencdn.net/v/oceans.mp4' // url地址
          src: require('../../../public/oceans.mp4')
        }],
        poster: require('../../assets/404_images/404.png'), // 你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        // notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  mounted() {
    // eslint-disable-next-line no-undef
    console.log('testmount')
    this.$nextTick(() => {
      // this.fillTableBlank()
      // eslint-disable-next-line no-sequences
    }),
    this.flushData()
    this.getFilelist()
  },
  methods: {
    // 全局加载loading图标
    openLoading() {
      const loading = this.$loading({ // 声明一个loading对象
        lock: true, // 是否锁屏
        fullScreen: false, // 是否为全屏 Dialog
        text: '数据上传中，请等待2分钟',
        background: 'rgba(0,0,0,0.7)' // 遮罩背景色
      })
      setTimeout(function() { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
        loading.close() // 关闭遮罩层
      }, 180000)
      return loading
    },
    // 上传文件
    submitFile() {
      console.log('click submit')
      this.$refs.fileRef.click()
    },
    uploadFileWithClear(event) {
      this.uploadFile(event)
      this.$refs.fileRef.value = '' // 处理完之后这里 清空当前file输入，不然连续点击会发现没有效果
    },
    // indexMethod(index) {
    //   console.log((this.page.currentPage - 1) * this.page.pageSize + index + 1)
    //
    //   return ((this.currentPage - 1) * this.pagesize + index + 1)
    // },
    uploadFile(event) {
      const files = event.target.files
      // 如果没有文件名
      if (files.length <= 0) {
        return
      } else if (!/\.(xls|xlsx|doc|docx)$/.test(files[0].name.toLowerCase())) {
        this.$message({
          type: 'error',
          message: '上传格式不正确，根据模版上传'
        })
        return
      }
      console.log(files[0])

      const forms = new FormData()
      forms.append('file', files[0], files[0].name)
      // 不再需要
      // forms.append('pageCurrent', 1)
      // forms.append('pageSize', 25)
      // console.log(forms.get('file'))
      // 打开加载框
      const pageLoading = this.openLoading()
      axios({
        url: process.env.VUE_APP_BASE_API + '/cv/dataMaintenance/upload',
        method: 'post',
        data: forms,
        headers: {
          'Content-Type': 'multipart/form-data'// 含有附件的表单提交的Content-Type
          // 'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
        }
      }).then(res => {
        pageLoading.close()
        this.flushTable(res.data)
      }).catch(err => { console.log(err) })
      // 需要添加等待框
      console.log('111111111111111111111111111111')

      this.$message({
        type: 'success',
        message: '添加成功'
      })
    },
    handleCurrentChange(pageindex) {
      this.page.currentPage = pageindex
      this.getFilelist()
    },
    getFilelist() {
      getfileList(this.page.currentPage, 25).then(res => {
        this.flushTable(res)
      }).catch(err => { console.log(err) })
      // const forms = new FormData()
      // // 页码
      // forms.append('pageCurrent', this.page.currentPage)
      // forms.append('pageSize', 25)
      //
      // axios({
      //   url: process.env.VUE_APP_BASE_API + '/cv/dataMaintenance/upload',
      //   method: 'post',
      //   data: forms,
      //   headers: {
      //     'Content-Type': 'multipart/form-data'// 含有附件的表单提交的Content-Type
      //     // 'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
      //   }
      // }).then(res => {
      //   this.flushTable(res)
      // }).catch(err => { console.log(err) })
    },
    // 处理返回的数据更新至表格
    flushTable(res) {
      console.log(res)
      if (res.code === 2000) {
        // this.$message.success(res.msg)
        this.devStatusData = []

        for (let i = 0; i < res.data.records.length; i++) {
          var item = {
            index: 0,
            name: '',
            id: ''
          }
          item.index = i + 1
          item.name = res.data.records[i].name
          item.id = res.data.records[i].id
          console.log(item)
          this.devStatusData.push(item)
          this.page.totalCount = res.data.total
        }
        this.fillTableBlank()
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 处理数据，将一维转二维
    radioChange() {
      console.log(this.activeMainName)
      this.activeSubName = this.subNameArray[0]
      this.flushData()
    },
    tabChange() {
      console.log(this.activeSubName)
      this.flushData()
    },
    flushData() {
      var tmparr = []
      if (this.activeMainName === '6') {
        ppreadData(1, this.activeMainName).then(res => {
          tmparr = []

          this.spareArray = res.data
        }

        )
      } else {
        ppreadData(1, this.activeMainName, this.activeSubName).then(res => {
          if (this.activeMainName === '1' || this.activeMainName === '2' || this.activeMainName === '3') {
            tmparr = []
            for (let i = 0; i < 8; i++) {
              tmparr[i] = []
              for (let j = 0; j < 15; j++) {
                tmparr[i][j] = res.data[i * 15 + j]
                // console.log(this.resistArray[i][j])
              }
            }
            this.resistArray = tmparr
          } else if (this.activeMainName === '4') {
            tmparr = []
            for (let i = 0; i < 8; i++) {
              tmparr[i] = []
              for (let j = 0; j < 8; j++) {
                tmparr[i][j] = res.data[i * 8 + j]
                // console.log(this.resistArray[i][j])
              }
            }
            this.circuitArray = tmparr
          } else if (this.activeMainName === '5') {
            tmparr = []
            for (let i = 0; i < 10; i++) {
              tmparr[i] = []
              for (let j = 0; j < 4; j++) {
                tmparr[i][j] = res.data[i * 4 + j]
                // console.log(this.resistArray[i][j])
              }
            }
            this.plelectrodeArray = tmparr
          } else if (this.activeMainName === '6') {
            tmparr = []
            for (let i = 0; i < 10; i++) {
              tmparr[i] = []
              for (let j = 0; j < 4; j++) {
                tmparr[i][j] = res.data[i * 4 + j]
                // console.log(this.resistArray[i][j])
              }
            }
            this.plelectrodeArray = tmparr
          }
        })
      }
    },
    fillTableBlank() {
      const item = {
      }
      for (let i = this.devStatusData.length; i < 25; i++) {
        this.devStatusData.push(item)
      }
    },
    handleNodeClick(data) {
      console.log(data)
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .maintain_tab2 .el-tabs__header{
  right: -60%;
  border: 0px solid rgb(0,147,231);
  //border: 2px solid rgb(0,147,231);
  color: rgb(6,203,255) ;
  overflow: hidden!important;

}
::v-deep .maintain_tab2 .el-tabs__header .el-tabs__nav{
  border: 2px solid rgb(0,147,231) !important;
  border-radius: 0 0 0 0;
  height: 30px;
}
::v-deep .maintain_tab2 .el-tabs__header .el-tabs__item{
  border: 0px solid rgb(0,147,231) !important;
  border-radius: 0 0 0 0;
  border-left: 2px solid rgb(0,147,231) !important;
  color: rgb(6,203,255);
  height: 100%;
  display: inline-grid;
  align-content: space-evenly;
}
::v-deep .maintain_tab2 .el-tabs__header .el-tabs__item.is-active{
  border: 0px solid rgb(0,147,231) !important;
  border-radius: 0 0 0 0;
  border-left: 2px solid rgb(0,147,231) !important;
  color: #ffffff;
}
::v-deep .maintain_tab2 .el-tabs__header .el-tabs__item:first-child{
  border: 0px solid rgb(0,147,231) !important;
  border-radius: 0 0 0 0;
  border-left: none;
  color: rgb(6,203,255);
}
::v-deep .maintain_tab2 .el-tabs__header .el-tabs__item:first-child.is-active{
  border: 0px solid rgb(0,147,231) !important;
  border-radius: 0 0 0 0;
  border-left: none;
  color: #ffffff;
}
//::v-deep.el-tabs--card>.el-tabs__header{
//  right: -33vh;
//  border-bottom: #f0f0f0;
//}

::v-deep.el-radio-button{
  &:first-child .el-radio-button__inner{
    border-radius: 0 0 0 0;

  }
}
::v-deep.el-radio-button:first-child .el-radio-button__inner  {
  border-radius: 0 0 0 0 !important;
}

::v-deep.second_button .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  width: 80px;
  height: 20px;
  color: rgb(255,255,255) !important;
  font-size: 12px;
  background-color: rgb(6,203,255);
  border-radius:0 0 0 0 !important;
}
::v-deep.second_button .el-radio-button__inner{
  width: 80px;
  height: 20px;
  border: none;
  color: rgb(2,126,177) !important;
  font-size: 12px;
  background-color: transparent;
  border-radius:0 0 0 0;
  background-color:rgb(13,63,102);
  text-indent: -8px;
  line-height: 1px;
  border-radius:0 0 0 0 !important;
}
//培训视频部分
.el-card{
  border: 0px solid #EBEEF5;
}
表格部分样式
::v-deep .el-table__header tr,
::v-deep .el-table__header th {
  padding: 0;
  height: 2%;
  font-size: 14px;
}
::v-deep .el-table--border, .el-table--group {
  border: none !important;
}
::v-deep .el-table__header {
  border-spacing: 0px;
  border-color:#104662 ;
}
::v-deep .el-table th.gutter{
  display: table-cell!important;
}
::v-deep.el-table–scrollable-y colgroup col[name=‘gutter’]{width:0px}
/* 去掉最下面的那一条线*/
::v-deep .el-table::before {
  height: 0px;
  background-color: transparent;
}
/* 设置表格行高度*/
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 30px;

}

/*表格内背景颜色*/
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {

  /*background-color: #052138;*/
  /*/ / 背景透明 */
  border: 0px;
  color: #93dcfe;
  /*/ / 修改字体颜色 */
  font-size: 14px;
  /* height: 30px; */
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

</style>
